<template>
	<view class="sign_in">
		<view class="background" >
			<image class="w-100vw" src="@/static/images/image 4@2x.png" mode="widthFix"></image>
			<view class="titlebox opacity-90">
				<view class="title">Hello!</view>
				<view class="title1">欢迎登录号卡宝平台</view>
			</view>
			
		</view>
		<view class="main">
				<view class="w-100vw flex-y-center justify-between headbtn text-center" :class="loginmode=='pass'?'pass':'sms'">
					<view class="w-100vw relative" :class="loginmode=='pass'?'active':'unactive'" @click="loginmode='pass'">密码登录</view>
					<view class="w-100vw relative" :class="loginmode=='sms'?'active':'unactive'" @click="loginmode='sms'">验证码登录</view>
				</view>
				<view class="p-40 bg-info-1">
					<!-- 账号密码登录 -->
					<view v-if="loginmode=='pass'">
						<view class="bg-info-2 my-40">
							<u--input
							    placeholder="请输入账号"
								prefixIcon="account-fill"
							    border="surround"
							    v-model="account"
							  ></u--input>
						</view>
						<view class="bg-info-2 my-40">
								<u--input
									:type="passShow?'text':'password'"
								    placeholder="请输入密码"
									prefixIcon="lock-fill"
								    border="surround"
								    v-model="password"
								  ></u--input>
						</view>
					</view>
					
					
					<!-- 验证码登录 -->
					<view v-if="loginmode=='sms'">
						<view class="bg-info-2 my-40">
							<u--input
							    placeholder="请输入手机号"
								prefixIcon="account-fill"
							    border="surround"
							    v-model="mobile"
							  ></u--input>
						</view>
						<view class="bg-info-2 my-40">
							<!-- #ifndef APP-NVUE -->
							<u-input placeholder="请输入验证码" v-model="captcha" prefixIcon="lock-fill">
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input placeholder="请输入验证码" v-model="captcha" prefixIcon="lock-fill">
							<!-- #endif -->
								<template slot="suffix">
									<u-code
										ref="uCode"
										@change="codeChange"
										:seconds="sendTime"
										changeText="X秒重新获取哈哈哈"
									></u-code>
									<u-button
										@tap="getCode"
										:text="tips"
										type="primary"
										size="mini"
									></u-button>
								</template>
							<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
					</view>
					
					
					
					<view class="flex-y-center justify-between">
						<view class="py-20" @click="modechange">{{shopmode==1?'大众版':'专业版'}}</view>
						<view class="py-20" @click="forgotBtn">忘记密码?</view>
					</view>
					<view class="in_btn" @click="submitBtn">登 录</view>
					<view class="text-center mt-40">
						还没有账号？<span class="color-primary pl-20" @click="registerBtn">注册</span>
					</view>			
				</view>
				
				<view class="change_txt pb-safe flex-y-center justify-center">
					<text v-if="changeIndex" class="siconfont icon-dui color-primary" @click="changeBtn"></text>
					<image v-else @click="changeBtn" src="@/static/images/change_icon1.png" mode=""></image>
					<text class="tip">我已阅读并同意</text>
					<text class="txt" @click="textBtn(1)">《用户协议》</text>
					<text class="tip">和</text>
					<text class="txt" @click="textBtn(2)">《隐私政策》</text>
				</view>
				
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account:'',
				password:'',
				mobile:'',
				captcha:'',
				passShow:false,
				changeIndex:false,
				loginmode:'pass',
				codeTxt:'发送验证码',
				sendTime:60,
				time:null,
				tips: '',
				shopmode:1,//1,大众版本。2:专业版
			};
		},
		methods:{
			modechange(){
				if(this.shopmode==1){
					this.shopmode=2;
				}else{
					this.shopmode=1;
				}
				// 将模式存储起来
				uni.setStorageSync('shopmode', this.shopmode);
			},
			codeChange(text) {
				this.tips = text;
			  },
			  getCode() {
				if (this.$refs.uCode.canGetCode) {
				  // 模拟向后端请求验证码
				  this.sendCodeBtn();
				} else {
				  uni.$u.toast('倒计时结束后再发送');
				}
			  },
			  change(e) {
				console.log('change', e);
			  },
			  // 发送验证码
			  sendCodeBtn(){
			  	var that = this
			  	if(that.disabled){
			  		return
			  	}
			  	if(that.mobile=='' || !that.$test.phoneTrue(that.mobile)){
			  		that.$tips.showToast('请输入正确的手机号')
			  		return
			  	}else{
			  		that.$tips.showLoading('发送中')
			  		var params = {
			  			mobile:that.mobile,
			  			event:'mobilelogin'
			  		}
			  		that.$httpApi.smsSend(params).then((res)=>{
			  			that.$tips.hideLoading()
			  			if(res.code==1){
			  				uni.hideLoading();
			  				// 这里此提示会被this.start()方法中的提示覆盖
			  				uni.$u.toast('验证码已发送');
			  				// 通知验证码组件内部开始倒计时
			  				this.$refs.uCode.start();
			  				if (!that.timer) {
			  				  that.disabled = true
			  				  that.codeTxt = that.sendTime+'s'
			  				  that.timer = setInterval(() => {
			  				    if (that.sendTime > 0 && that.sendTime <= 60) {
			  				      that.sendTime--
			  				      that.codeTxt = that.sendTime+'s'
			  				    } else {
			  				      that.disabled = false
			  				      that.sendTime = 60
			  				      that.codeTxt = '重新获取'
			  				      clearInterval(that.timer)
			  				      that.timer = null;
			  				    }
			  				  }, 1000)
			  				}
			  			}
			  		})
			  	}
			  },
			//
			textBtn(val){
				uni.navigateTo({
					url:'/pages/other/text?type='+val
				})
			},
			// 查看密码
			passBtn(){
				this.passShow=!this.passShow
			},
			//
			changeBtn(type){
				this.changeIndex=!this.changeIndex
			},
			// 登录
			submitBtn(){
				var that = this
				if(!that.changeIndex){
					that.$tips.showToast('请先同意用户协议和隐私政策');
					return;
				}
				// 根据登录模式走不同的接口
				if(that.loginmode=='pass'){
					if(that.account==''){
						that.$tips.showToast('请输入账号')
						return
					}else if(that.password==''){
						that.$tips.showToast('请输入密码')
						return
					}else {
						that.$tips.showLoading('加载中')
						var params = {
							account:that.account,
							password:that.password
						}
						that.$httpApi.userLogin(params).then((res)=>{
							that.$tips.hideLoading()
							if(res.code==1){
								that.$store.commit('SET_TOKEN',res.data.userinfo.token)
								that.$store.dispatch('GetUserInfo')
								// 根据登录条件进行区分
								if(that.shopmode==1){
									uni.redirectTo({
										url:'/pages/home/home'
									})
								}else{
									uni.redirectTo({
										url:'/pages/home/home1'
									})
								}
								
								
							}
						})
					}
				}else{
					if(that.mobile==''){
						that.$tips.showToast('请输入手机号')
						return
					}else if(that.captcha==''){
						that.$tips.showToast('请输入验证码')
						return
					}else {
						that.$tips.showLoading('加载中')
						var params = {
							mobile:that.mobile,
							captcha:that.captcha
						}
						that.$httpApi.mobilelogin(params).then((res)=>{
							that.$tips.hideLoading()
							if(res.code==1){
								that.$store.commit('SET_TOKEN',res.data.userinfo.token)
								that.$store.dispatch('GetUserInfo')
								uni.switchTab({
									url:'/pages/order/ordertwo'
								})
							}
						})
					}
				}
				
			},
			// 注册
			registerBtn(){
				uni.navigateTo({
					url:'/pages/signIn/register'
				})
			},
			// 忘记密码
			forgotBtn(){
				uni.navigateTo({
					url:'/pages/signIn/forgot'
				})
			},
		}
	}
</script>

<style lang="less">
	.sign_in{
		width: 100%;
		height: 100vh;
		background: #fff;
		.background{
			position: relative;
			z-index: 0;
			display: block;
			width: 100%;height:500rpx;
			margin-bottom: -90rpx;
			.titlebox{
				text-shadow:0 2px 6px #0000006b;
				position: absolute;left: 40rpx;
				top: 80px;
				color: var(--color-primary);
				.title{
					width: 100%;
					font-size: 64rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 500;
				}
				.title1{
					width: 100%;
					font-size: 34rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 500;
					padding-bottom: 100rpx;
				}
			}
			
		}
		.main{
			position: relative;
			z-index: 2;
			width: 100%;
			.headbtn{
				position: relative;
				border-top-left-radius: 40rpx;
				border-top-right-radius: 40rpx;
				background: rgba(255,255,255,0.7);
				.active,.unactive{
					position: relative;
					z-index: 2;
					height: 90rpx;
					line-height: 90rpx;
					font-weight: bold;
					color: #666;
					text-align: center;
				}
				.active{
					color: var(--color-primary);
				}
				.active::after{
					content: '';height: 8rpx;width: 8%;border-radius: 4rpx;background: var(--color-primary);
					position: absolute;bottom:10rpx;left:46%;
				}
			}
			.sms::after,.pass::after{
				content: '';position: absolute;left:0;right:0;top:0;height: 90rpx;
				background-image: url('@/static/images/Rectangle-10021@2x.png');
				background-size: cover;
			}
			.sms::after{
				transform: scaleX(-1);
			}
			// .headbtn::after{
			// 	position: absolute;
			// 	z-index: 0;
			// 	left: 0;right: 0;top: 0;bottom: 0;
			// 	content: '';
				
			// 	filter: blur(1px);
				
			// }
			.change_txt{
				width: 100%;
				position: fixed;
				bottom:40rpx;
				.siconfont,image{
					display: block;
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}
				
				.tip{
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #888888;
				}
				.txt{
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: var(--color-primary);
				}
			}
			.in_btn{
				margin-top: 100rpx;
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				border-radius: 20rpx;
				background-color: var(--color-primary);
			}
			.bot_txt{
				width: 100%;
				margin-top: 400rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: var(--color-primary);
			}
		}
	}
</style>
